function createHead(key, o) {
	var html = "<div data-role=\"header\"><a href=\"#" + key
			+ "panel\" data-role=\"button\" data-iconpos=\"notext\""
			+ "	data-inline=\"true\" data-icon=\"bars\"></a><h1>"
			+ o.metro.title + " </h1></div>";
	$(".ajaxfield:last").append(html);

}

function addContent(key) {
	var html = "<div data-role=\"content\" class='content'><div data-inset=\"false\" data-role=\"collapsible-set\"></div></div>";
	$(".ajaxfield:last").append(html);
}

function AddMenu(k) {
	var html = "<div data-role=\"panel\" id=\"" + k
			+ "panel\" data-theme=\"b\"><ul data-role=\"listview\" id='" + k
			+ "navUl'>"
			+ " <li data-role=\"list-divider\">menu</li></ul>	</div>";
	$(".ajaxfield:last").append(html);

	$.each(AppData, function(key) {
		var html = "<li><a href='" + this.metro.location + "?key=" + key
				+ "' id='" + k + key + "link'>" + this.metro.title
				+ "</a></li>";
		$("#" + k + "navUl").append(html);

		$("#" + k + key + "link").click(function() {
			window.key = key;
		});

	});

}

// /////////
// here is the share part
var sharedView = {
	"type" : "div",
	"style" : "",
	"content" : {
		"context" : {
			"type" : "accordions",
			"title" : "Context Search Setting",
			"content" : {
				"contextMessage" : {
					"type" : "checkbox",
					"label" : "If you want to link the data sections selected above with external information, in order to better define their context: Which criteria do you want to apply in the search for external information?",
					"style" : "label-message",
					"content" : {
						"geography" : {
							"label" : "Geography",
							"checked" : "false"

						},
						"crossdomain" : {
							"label" : "Cross-domain",
							"checked" : "false"
						},
						"government" : {

							"label" : "Government",
							"checked" : "false"
						},
						"media" : {
							"label" : "Media",
							"checked" : "false"
						},
						"usergenerated" : {
							"label" : "User Generated Content",
							"checked" : "false"
						},
						"publication" : {
							"label" : "Publication",
							"checked" : "false"
						},
						"lifescience" : {
							"label" : "Life Science",
							"checked" : "false"
						}
					}
				},
				"SelectCriteria" : {
					"type" : "label",
					"message" : "Select criteria to consider while linking:",
					"style" : "label-message"
				},
				"LocationsLabel" : {
					"type" : "label",
					"message" : "Locations (write the location and use comma to divided):",
					"style" : "label-message"
				},
				"NEAR" : {
					"label" : "NEAR",
					"type" : "input",
				},
				"UNDER" : {
					"label" : "UNDER",
					"type" : "input",
				},
				"OVER" : {
					"label" : "OVER",
					"type" : "input",
				},
				"IN" : {
					"label" : "IN",
					"type" : "input",
				},
				"OF" : {
					"label" : "OF",
					"type" : "input",
				},
				"Things" : {
					"label" : "Things",
					"type" : "input",
				},
				"start_datetime" : {
					"label" : "start:",
					"type" : "date",
					"level" : "0",
					"defalutValue" : "",
					"isData" : "true"
				},
				"end_datetime" : {
					"label" : "end:",
					"type" : "date",
					"level" : "0",
					"defalutValue" : "",
					"isData" : "true"
				}

			}
		},
		"commonChoiceDiv" : {
			"type" : "accordions",
			"title" : "optional choice:",
			"style" : "Field-content-hide",
			"content" : {

				"base_datetime" : {
					"label" : "base datetime:",
					"type" : "datetime",
					"level" : "0",
					"defalutValue" : "",
					"isData" : "true"
				},
				"archive" : {
					"label" : "archive:",
					"type" : "uri",
					"level" : "0",
					"isData" : "true"
				},
				"description" : {
					"label" : "description",
					"type" : "input",
					"style" : "",
					"level" : "0",
					"defalutValue" : "",
					"isData" : "true"
				}
			}
		},

		"AuthorDiv" : {
			"type" : "accordions",
			"title" : "Write your information:",
			"style" : "Field-content-hide",
			"content" : {
				"surname" : {
					"label" : "surname:",
					"type" : "input",
					"defalutValue" : "",
					"isData" : "true"
				},
				"firstname" : {
					"label" : "firstname:",
					"type" : "input",

					"defalutValue" : "",
					"isData" : "true"
				},
				"email" : {
					"label" : "email:",
					"type" : "input",

					"defalutValue" : "",
					"isData" : "true"
				},
				"homepage" : {
					"label" : "homepage:",
					"type" : "uri",
					"isData" : "true"
				},
				"nickname" : {
					"label" : "nickname:",
					"type" : "input",

					"defalutValue" : "",
					"isData" : "true"
				},
				"weblog" : {
					"label" : "weblog:",
					"type" : "uri",
					"isData" : "true"
				}
			}
		},

		"storeDiv" : {
			"type" : "accordions",
			"title" : "Store data:",
			"style" : "Field-content-hide",
			"content" : {
				"storeType" : {
					"label" : "I will store the generated Linked Data on my database",
					"style" : "",
					"type" : "switch",
					"content" : [ "No", "Yes" ]
				},
				"uri" : {
					"label" : "uri",
					"type" : "uri",
					"style" : "hide",
					"level" : "0",
					"isData" : "true"
				},

				"serializeType" : {
					"type" : "radio",
					"label" : "  Serialize as:",
					"content" : {
						"json" : {
							"label" : "RDF/JSON",
							"value" : "application/rdf+json",
							"checked" : "true"
						},
						"xml" : {
							"label" : "RDF/XML",
							"value" : "application/rdf+xml",
							"checked" : "false"
						},
						"ntriple" : {
							"label" : "N-Triples",
							"value" : "text/n-triples",
							"checked" : "false"
						},
						"turtle" : {
							"label" : "Turtle",
							"value" : "text/*",
							"checked" : "false"
						}
					}
				}
			}
		}

	}
};

// ov json
var ov = {
	"metro" : {
		"title" : "observation value",
		"location" : "AjaxField.html",
		"description" : "give you the observation value from this page",
		"hide" : "false"
	},
	"page" : {// here is the information for the page
		"ajax" : {
			"url" : "/ov/",
			"type" : "post",
			"contentType" : "application/json; charset=utf-8"
		},
		"view" : {
			"Basic" : {
				"type" : "accordions",
				"title" : "Sensor Reading:",
				"open" : "true",
				"content" : {
					"sensorId" : {
						"label" : "sensor-id:",
						"type" : "input",
						"labelStyle" : "label-red",
						"level" : "0",
						"defalutValue" : "123",
						"isData" : "true"
					},
					"values" : {
						"label" : "values:",
						"type" : "input",
						"level" : "2",
						"defalutValue" : "",
						"isData" : "true"

					},
					"start_range" : {
						"label" : "start time:",
						"type" : "input",
						"level" : "0",
						"defalutValue" : "",
						"isData" : "true"

					},
					"end_range" : {
						"label" : "end time:",
						"type" : "input",
						"level" : "0",
						"defalutValue" : "",
						"isData" : "true"
					},
					"type" : {
						"label" : "type:",
						"type" : "input",
						"level" : "0",
						"defalutValue" : "Observation Value",
						"isData" : "true"
					}
				}
			},
			"sharedView" : sharedView,
			"generateButton" : {
				"type" : "button",
				"style" : "generateButton",
				"label" : "",
				"value" : "generate",
				"click" : function() {
					// get common data
					var data = GetCommonData();
					// get url info
					var commonData = GetAjaxData();
					if (request("key") != "") {
						var key = request("key");
					} else {
						key = window.key;
					}

					var view = AppData[key].page.view;
					var ajaxOpt = $.extend({}, AppData[key].page.ajax);
					var PostData = $.extend(data.sendData, commonData);

					if (data.AjaxData.uri == undefined) {
						PostData.uri = ajaxOpt.url = serverLocation
								+ AppData[key].page.ajax.url
								+ PostData.sensorId;// use
						// default
					} else {
						ajaxOpt.url = serverLocation
								+ AppData[key].page.ajax.url;
						var s = data.AjaxData.uri
								.charAt(data.AjaxData.uri.length - 1);
						if (s != '/') {
							data.AjaxData.uri = data.AjaxData.uri + '/';
						}
						PostData.uri = data.AjaxData.uri
								+ data.sendData.sensorId;// use
						// special
					}

					if (data.AjaxData.serializeType != undefined) {
						ajaxOpt.Accept = data.AjaxData.serializeType;
					}
					var ajaxprocess = new AjaxProcess(ajaxOpt, PostData);
					ajaxprocess.doAjax();
				}
			},
			"result" : {
				"type" : "div",
				"style" : "code-result",
				"content" : {

				}
			}
		}
	}
};

// device data
var device = {
	"metro" : {
		"title" : "Device, Sensing Device and Sensor",
		"location" : "AjaxField.html",
		"description" : "Control the Device",
		"hide" : "false"
	},
	"page" : {
		"ajax" : {
			"url" : "/device/",
			"type" : "post",
			"dataType" : "html",
			"contentType" : "application/json; charset=utf-8"
		},
		"view" : {
			"DeviceLabel" : {
				"type" : "label",
				"message" : "Device, Sensing Device, Sensor :",
				"style" : "label-message"
			},
			"Basic" : {
				"type" : "div",
				"style" : "Field-content",
				"content" : {
					"OpenNewDialog" : {
						"type" : "button",
						"style" : "open-dialog-button",
						"labelStyle" : "label",
						"label" : "Sensor Temporal property:",
						"value" : "open",
						"click" : function() {
							$("#tps", window.parent.document).trigger("click");

						}
					},
					"tsproperties" : {
						"label" : "Sensor Temporal Properties URIs:",
						"type" : "input",
						"level" : "2",
						"labelStyle" : "label-red",
						"isData" : "true"
					},
					"observation_values" : {
						"label" : "Observation Value instances:",
						"type" : "input",
						"level" : "2",
						"labelStyle" : "label",
						"isData" : "true"
					},
					"platform" : {
						"label" : "platform:",
						"type" : "input",
						"isData" : "true"
					},
					"base_ov_name" : {
						"label" : "Base name:",
						"type" : "uri",
						"isData" : "true"
					},
					"observed_property" : {
						"label" : "Observed Property:",
						"type" : "input",
						"isData" : "true"
					},
					"uom" : {
						"label" : "Unit of Measurement:",
						"type" : "input",
						"isData" : "true"
					},
					"type" : {
						"label" : "type:",
						"type" : "input",
						"level" : "0",
						"defalutValue" : "Device, Sensing Device, Sensor",
						"isData" : "true"
					}

				}
			},
			"sharedView" : sharedView,
			"generateButton" : {
				"type" : "button",
				"value" : "generate",
				"click" : function() {
					var data = GetCommonData();
					// get url info

					var commonData = GetAjaxData();
					//

					if (request("key") != "") {
						var key = request("key");
					} else {
						key = window.key;
					}
					var view = AppData[key].page.view;
					var ajaxOpt = $.extend({}, AppData[key].page.ajax);

					var PostData = $.extend(data.sendData, commonData);
					if (data.AjaxData.uri == undefined) {
						PostData.uri = ajaxOpt.url = serverLocation
								+ AppData[key].page.ajax.url;

					} else {
						ajaxOpt.url = serverLocation
								+ AppData[key].page.ajax.url;
						PostData.uri = data.AjaxData.uri;

					}

					if (data.AjaxData.serializeType != undefined) {
						ajaxOpt.Accept = data.AjaxData.serializeType;
					}

					var ajaxprocess = new AjaxProcess(ajaxOpt, PostData);
					ajaxprocess.doAjax();
				}
			},
			"result" : {
				"type" : "div",
				"style" : "code-result",
				"content" : {

				}
			}
		}
	}
};

// Sensor Temporal Property
var tps = {
	"metro" : {
		"title" : "Sensor Temporal Property",
		"location" : "AjaxField.html",
		"description" : "description of Sensor Temporal Property",
		"hide" : "true"
	},
	"page" : {// here is the information for the page
		"ajax" : {
			"url" : "/tps/",
			"type" : "post",
			"dataType" : "html",
			"contentType" : "application/json; charset=utf-8"
		},
		"view" : {
			"SensorLabel" : {
				"type" : "label",
				"message" : " Sensor Temporal Property:",
				"style" : "label-message"
			},
			"Basic" : {
				"type" : "div",
				"style" : "Field-content",
				"content" : {
					"net_links" : {
						"label" : "URIs of opened network links:",
						"type" : "input",
						"labelStyle" : "label-red",
						"level" : "2",
						"defalutValue" : "",
						"isData" : "true"
					},
					"net_role" : {
						"label" : "Network role:",
						"type" : "uri",
						"isData" : "true"

					},
					"foi" : {
						"label" : "Feature of Interest:",
						"type" : "input",
						"level" : "0",
						"defalutValue" : "",
						"isData" : "true"

					},
					"type" : {
						"label" : "type:",
						"type" : "input",
						"level" : "0",
						"defalutValue" : "Sensor Temporal Property",
						"isData" : "true"
					},
					"location_name" : {
						"label" : "location name:",
						"type" : "input",
						"style" : "",
						"level" : "0",
						"defalutValue" : "",
						"isData" : "true"
					},
					"location_coords" : {
						"label" : "location coords:",
						"type" : "map",
						"style" : "map-out-div",
						"isData" : "true",
						"click" : function(result) {

							$("#location_name")
									.val(result[0].formatted_address);
						}
					}
				}
			},
			"sharedView" : sharedView,
			"generateButton" : {
				"type" : "button",
				"style" : "generateButton",
				"label" : "",
				"value" : "generate",
				"click" : function() {
					// get common data

					var data = GetCommonData();
					// get url info

					var commonData = GetAjaxData();
					//

					if (request("key") != "") {
						var key = request("key");
					} else {
						key = window.key;
					}
					var view = AppData[key].page.view;
					var ajaxOpt = $.extend({}, AppData[key].page.ajax);

					var PostData = $.extend(data.sendData, commonData);
					if (data.AjaxData.uri == undefined) {
						PostData.uri = ajaxOpt.url = serverLocation
								+ AppData[key].page.ajax.url;

					} else {
						ajaxOpt.url = serverLocation
								+ AppData[key].page.ajax.url;
						PostData.uri = data.AjaxData.uri;

					}

					if (data.AjaxData.serializeType != undefined) {
						ajaxOpt.Accept = data.AjaxData.serializeType;
					}
					var ajaxprocess = new AjaxProcess(ajaxOpt, PostData);
					ajaxprocess.doAjax();

				}
			},
			"result" : {
				"type" : "div",
				"style" : "code-result",
				"content" : {

				}
			}
		}
	}
};

// Platform, Testbed
var platform = {
	"metro" : {
		"title" : "Platform, Testbed",
		"location" : "AjaxField.html",
		"description" : "description of Platform, Testbed",
		"hide" : "false"
	},
	"page" : {// here is the information for the page
		"ajax" : {
			"url" : "/platform/",
			"type" : "post",
			"dataType" : "html",
			"contentType" : "application/json; charset=utf-8"
		},
		"view" : {
			"SensorLabel" : {
				"type" : "label",
				"message" : "Platform, Testbed:",
				"style" : "label-message"
			},
			"Basic" : {
				"type" : "div",
				"style" : "Field-content",
				"content" : {
					"OpenNewDialog" : {
						"type" : "button",
						"style" : "open-dialog-button",
						"labelStyle" : "label",
						"label" : "Platform Temporal property:",
						"value" : "open",
						"click" : function() {
							$("#tpp", window.parent.document).trigger("click");

						}
					},
					"tpproperties" : {
						"label" : "Platform Temporal Properties URIs:",
						"type" : "input",
						"labelStyle" : "label-red",
						"level" : "2",
						"defalutValue" : "",
						"isData" : "true"
					},

					"feeds" : {
						"label" : "Feeds URI:",
						"type" : "uri",
						"level" : "2",
						"isData" : "true"

					},
					"status" : {
						"label" : "Status URI:",
						"type" : "uri",
						"isData" : "true"

					},
					"foi" : {
						"label" : "Feature of Interest:",
						"type" : "input",
						"level" : "0",
						"defalutValue" : "",
						"isData" : "true"

					},
					"type" : {
						"label" : "type:",
						"type" : "input",
						"level" : "0",
						"defalutValue" : "Platform, Testbed",
						"isData" : "true"

					}
				}
			},
			"sharedView" : sharedView,
			"generateButton" : {
				"type" : "button",
				"style" : "generateButton",
				"label" : "",
				"value" : "generate",
				"click" : function() {
					// get common data

					var data = GetCommonData();
					// get url info

					var commonData = GetAjaxData();
					//

					if (request("key") != "") {
						var key = request("key");
					} else {
						key = window.key;
					}
					var view = AppData[key].page.view;
					var ajaxOpt = $.extend({}, AppData[key].page.ajax);

					var PostData = $.extend(data.sendData, commonData);
					if (data.AjaxData.uri == undefined) {
						PostData.uri = ajaxOpt.url = serverLocation
								+ AppData[key].page.ajax.url;

					} else {
						ajaxOpt.url = serverLocation
								+ AppData[key].page.ajax.url;
						PostData.uri = data.AjaxData.uri;

					}

					if (data.AjaxData.serializeType != undefined) {
						ajaxOpt.Accept = data.AjaxData.serializeType;
					}
					var ajaxprocess = new AjaxProcess(ajaxOpt, PostData);
					ajaxprocess.doAjax();

				}
			},
			"result" : {
				"type" : "div",
				"style" : "code-result",
				"content" : {

				}
			}
		}
	}
};

// Platform Temporal Property
var tpp = {
	"metro" : {
		"title" : "Platform Temporal Property",
		"location" : "AjaxField.html",
		"description" : "description of Platform Temporal Property",
		"hide" : "true"
	},
	"page" : {// here is the information for the page
		"ajax" : {
			"url" : "/tpp/",
			"type" : "post",
			"dataType" : "html",
			"contentType" : "application/json; charset=utf-8"
		},
		"view" : {
			"SensorLabel" : {
				"type" : "label",
				"message" : "Platform Temporal Property:",
				"style" : "label-message"
			},
			"Basic" : {
				"type" : "div",
				"style" : "Field-content",
				"content" : {
					"systems" : {
						"label" : "Attached devices URIs:",
						"type" : "uri",
						"labelStyle" : "label",
						"level" : "2",
						"isData" : "true"
					},
					"algorithms" : {
						"label" : "Algorithms in use:",
						"type" : "uri",
						"level" : "2",
						"isData" : "true"

					},
					"type" : {
						"label" : "type:",
						"type" : "input",
						"level" : "0",
						"defalutValue" : "Platform Temporal Property",
						"isData" : "true"
					},
					"location_name" : {
						"label" : "location name:",
						"type" : "input",
						"style" : "",
						"level" : "0",
						"defalutValue" : "",
						"isData" : "true"
					},
					"location_coords" : {
						"label" : "location coords:",
						"type" : "map",
						"style" : "map-out-div",
						"isData" : "true",
						"click" : function(result) {

							$("#location_name")
									.val(result[0].formatted_address);
						}
					},
					"owners" : {
						"label" : "Owners:",
						"type" : "muti-input",
						"level" : "2",
						"children" : {
							"surname" : {
								"label" : "surname:",
								"type" : "input",
								"level" : "3",
								"isData" : "true"
							},
							"firstname" : {
								"label" : "firstname",
								"type" : "input",
								"level" : "3",
								"isData" : "true"
							}
						},
						"isData" : "true"
					},
					"worn_by" : {
						"label" : "Carriers:",
						"type" : "muti-input",
						"children" : {
							"surname" : {
								"label" : "surname:",
								"type" : "input",
								"level" : "3",
								"isData" : "true"
							},
							"firstname" : {
								"label" : "firstname",
								"type" : "input",
								"level" : "3",
								"isData" : "true"
							}
						},
						"isData" : "true"
					}
				}
			},
			"sharedView" : sharedView,
			"generateButton" : {
				"type" : "button",
				"style" : "generateButton",
				"label" : "",
				"value" : "generate",
				"click" : function() {
					// get common data

					var data = GetCommonData();
					// get url info

					var commonData = GetAjaxData();
					//

					if (request("key") != "") {
						var key = request("key");
					} else {
						key = window.key;
					}
					var view = AppData[key].page.view;
					var ajaxOpt = $.extend({}, AppData[key].page.ajax);

					var PostData = $.extend(data.sendData, commonData);
					if (data.AjaxData.uri == undefined) {
						PostData.uri = ajaxOpt.url = serverLocation
								+ AppData[key].page.ajax.url;

					} else {
						ajaxOpt.url = serverLocation
								+ AppData[key].page.ajax.url;
						PostData.uri = data.AjaxData.uri;

					}
					if (data.AjaxData.serializeType != undefined) {
						ajaxOpt.Accept = data.AjaxData.serializeType;
					}

					var ajaxprocess = new AjaxProcess(ajaxOpt, PostData);
					ajaxprocess.doAjax();

				}
			},
			"result" : {
				"type" : "div",
				"style" : "code-result",
				"content" : {

				}
			}
		}
	}
};

// data link
var data_link = {
	"metro" : {
		"title" : "data link",
		"location" : "AjaxField.html",
		"description" : "description of data link",
		"hide" : "false"
	},
	"page" : {// here is the information for the page
		"ajax" : {
			"url" : "/link/",
			"type" : "post",
			"dataType" : "html",
			"contentType" : "application/json; charset=utf-8"
		},
		"view" : {
			"SensorLabel" : {
				"type" : "label",
				"message" : "data link:",
				"style" : "label-message"
			},
			"Basic" : {
				"type" : "div",
				"style" : "Field-content",
				"content" : {
					"to" : {
						"label" : "to:",
						"type" : "uri",
						"labelStyle" : "label",
						"isData" : "true"
					},
					"title" : {
						"label" : "title:",
						"type" : "input",
						"level" : "0",
						"defalutValue" : "",
						"isData" : "true"

					},
					"updated" : {
						"label" : "updated:",
						"type" : "datetime",
						"level" : "0",
						"defalutValue" : "",
						"isData" : "true"

					},
					"feedbacks" : {
						"label" : "feedbacks:",
						"type" : "uri",
						"level" : "2",

						"isData" : "true"

					},
					"type" : {
						"label" : "type:",
						"type" : "input",
						"level" : "0",
						"defalutValue" : "data link",
						"isData" : "true"
					}
				}
			},
			"sharedView" : sharedView,
			"generateButton" : {
				"type" : "button",
				"style" : "generateButton",
				"label" : "",
				"value" : "generate",
				"click" : function() {
					// get common data

					var data = GetCommonData();
					// get url info

					var commonData = GetAjaxData();
					//

					if (request("key") != "") {
						var key = request("key");
					} else {
						key = window.key;
					}
					var view = AppData[key].page.view;
					var ajaxOpt = $.extend({}, AppData[key].page.ajax);

					var PostData = $.extend(data.sendData, commonData);
					if (data.AjaxData.uri == undefined) {
						PostData.uri = ajaxOpt.url = serverLocation
								+ AppData[key].page.ajax.url;

					} else {
						ajaxOpt.url = serverLocation
								+ AppData[key].page.ajax.url;
						PostData.uri = data.AjaxData.uri;

					}
					if (data.AjaxData.serializeType != undefined) {
						ajaxOpt.Accept = data.AjaxData.serializeType;
					}

					var ajaxprocess = new AjaxProcess(ajaxOpt, PostData);
					ajaxprocess.doAjax();

				}
			},
			"result" : {
				"type" : "div",
				"style" : "code-result",
				"content" : {

				}
			}
		}
	}
};
// Link Review

var link_review = {
	"metro" : {
		"title" : "Link Review",
		"location" : "AjaxField.html",
		"description" : "description of Link Review",
		"hide" : "false"
	},
	"page" : {// here is the information for the page
		"ajax" : {
			"url" : "/link/feedback/",
			"type" : "post",
			"dataType" : "html",
			"contentType" : "application/json; charset=utf-8"
		},
		"view" : {
			"SensorLabel" : {
				"type" : "label",
				"message" : "Link Review:",
				"style" : "label-message"
			},
			"Basic" : {
				"type" : "div",
				"style" : "Field-content",
				"content" : {
					"vote" : {
						"label" : "Vote:",
						"type" : "input",
						"labelStyle" : "label",
						"level" : "0",
						"defalutValue" : "",
						"isData" : "true"
					},
					"link" : {
						"label" : "DataLink URI:",
						"type" : "uri",
						"level" : "0",

						"isData" : "true"

					},
					"comment" : {
						"label" : "Comment:",
						"type" : "input",
						"level" : "0",
						"defalutValue" : "",
						"isData" : "true"

					},
					"type" : {
						"label" : "type:",
						"type" : "input",
						"level" : "0",
						"defalutValue" : "Link Review",
						"isData" : "true"
					}
				}
			},
			"sharedView" : sharedView,
			"generateButton" : {
				"type" : "button",
				"style" : "generateButton",
				"label" : "",
				"value" : "generate",
				"click" : function() {
					// get common data

					var data = GetCommonData();
					// get url info

					var commonData = GetAjaxData();
					//

					if (request("key") != "") {
						var key = request("key");
					} else {
						key = window.key;
					}
					var view = AppData[key].page.view;
					var ajaxOpt = $.extend({}, AppData[key].page.ajax);

					var PostData = $.extend(data.sendData, commonData);
					if (data.AjaxData.uri == undefined) {
						PostData.uri = ajaxOpt.url = serverLocation
								+ AppData[key].page.ajax.url;

					} else {
						ajaxOpt.url = serverLocation
								+ AppData[key].page.ajax.url;
						PostData.uri = data.AjaxData.uri;

					}
					if (data.AjaxData.serializeType != undefined) {
						ajaxOpt.Accept = data.AjaxData.serializeType;
					}

					var ajaxprocess = new AjaxProcess(ajaxOpt, PostData);
					ajaxprocess.doAjax();

				}
			},
			"result" : {
				"type" : "div",
				"style" : "code-result",
				"content" : {

				}
			}
		}
	}
};

// Measurement Capability

var meas_capab = {
	"metro" : {
		"title" : "Measurement Capability",
		"location" : "AjaxField.html",
		"description" : "Measurement Capability",
		"hide" : "false"
	},
	"page" : {// here is the information for the page
		"ajax" : {
			"url" : "/meas_capab/",
			"type" : "post",
			"dataType" : "html",
			"contentType" : "application/json; charset=utf-8"
		},
		"view" : {
			"SensorLabel" : {
				"type" : "label",
				"message" : "Measurement Capability:",
				"style" : "label-message"
			},
			"Basic" : {
				"type" : "div",
				"style" : "Field-content",
				"content" : {
					"OpenNewDialog" : {
						"type" : "button",
						"style" : "open-dialog-button",
						"labelStyle" : "label",
						"label" : "measure property:",
						"value" : "open",
						"click" : function() {
							$("#meas_prop", window.parent.document).trigger(
									"click");

						}
					},
					"measurement_properties" : {
						"label" : "Measurement Property URIs:",
						"type" : "uri",
						"labelStyle" : "label",
						"level" : "2",
						"isData" : "true"
					},
					"observed_property" : {
						"label" : "Property this capability:",
						"type" : "input",
						"level" : "0",
						"defalutValue" : "",
						"isData" : "true"
					},
					"type" : {
						"label" : "type:",
						"type" : "input",
						"level" : "0",
						"defalutValue" : "Measurement Capability",
						"isData" : "true"
					}
				}
			},
			"sharedView" : sharedView,
			"generateButton" : {
				"type" : "button",
				"style" : "generateButton",
				"label" : "",
				"value" : "generate",
				"click" : function() {
					// get common data

					var data = GetCommonData();
					// get url info

					var commonData = GetAjaxData();
					//

					if (request("key") != "") {
						var key = request("key");
					} else {
						key = window.key;
					}
					var view = AppData[key].page.view;
					var ajaxOpt = $.extend({}, AppData[key].page.ajax);

					var PostData = $.extend(data.sendData, commonData);
					if (data.AjaxData.uri == undefined) {
						PostData.uri = ajaxOpt.url = serverLocation
								+ AppData[key].page.ajax.url;

					} else {
						ajaxOpt.url = serverLocation
								+ AppData[key].page.ajax.url;
						PostData.uri = data.AjaxData.uri;

					}

					if (data.AjaxData.serializeType != undefined) {
						ajaxOpt.Accept = data.AjaxData.serializeType;
					}
					var ajaxprocess = new AjaxProcess(ajaxOpt, PostData);
					ajaxprocess.doAjax();

				}
			},
			"result" : {
				"type" : "div",
				"style" : "code-result",
				"content" : {

				}
			}
		}
	}
};

// Measurement Property
var meas_prop = {
	"metro" : {
		"title" : "Measurement Property",
		"location" : "AjaxField.html",
		"description" : "Measurement Property",
		"hide" : "true"
	},
	"page" : {// here is the information for the page
		"ajax" : {
			"url" : "/meas_prop/",
			"type" : "post",
			"dataType" : "html",
			"contentType" : "application/json; charset=utf-8"
		},
		"view" : {
			"SensorLabel" : {
				"type" : "label",
				"message" : "Measurement Property:",
				"style" : "label-message"
			},
			"Basic" : {
				"type" : "div",
				"style" : "Field-content",
				"content" : {
					"uom" : {
						"label" : "unit of measurement:",
						"type" : "input",
						"labelStyle" : "label",
						"level" : "0",
						"defalutValue" : "Centigrade",
						"isData" : "true"
					},
					"predicate" : {
						"label" : "predicate:",
						"type" : "uri",
						"level" : "0",
						"isData" : "true"
					},
					"value" : {
						"label" : "value:",
						"type" : "input",
						"level" : "0",
						"defalutValue" : "",
						"isData" : "true"
					},
					"type" : {
						"label" : "type:",
						"type" : "input",
						"level" : "0",
						"defalutValue" : "Measurement Property",
						"isData" : "true"
					},
					"conditions" : {
						"label" : "conditions:",
						"type" : "muti-input",
						"level" : "2",
						"children" : {
							"oncondition_uom" : {
								"label" : "unit of measurement:",
								"type" : "input",
								"level" : "3",
								"isData" : "true"
							},
							"oncondition_value" : {
								"label" : " condition value:",
								"type" : "input",
								"level" : "3",
								"isData" : "true"
							},
							"oncondition_predicate" : {
								"label" : "condition predicate:",
								"type" : "input",
								"level" : "3",
								"isData" : "true"
							},
							"oncondition_property" : {
								"label" : "condition property:",
								"type" : "uri",
								"level" : "3",
								"isData" : "true"
							}
						},
						"isData" : "true"
					},
				}
			},
			"sharedView" : sharedView,
			"generateButton" : {
				"type" : "button",
				"style" : "generateButton",
				"label" : "",
				"value" : "generate",
				"click" : function() {
					// get common data

					var data = GetCommonData();
					// get url info

					var commonData = GetAjaxData();
					//

					if (request("key") != "") {
						var key = request("key");
					} else {
						key = window.key;
					}
					var view = AppData[key].page.view;
					var ajaxOpt = $.extend({}, AppData[key].page.ajax);

					var PostData = $.extend(data.sendData, commonData);
					if (data.AjaxData.uri == undefined) {
						PostData.uri = ajaxOpt.url = serverLocation
								+ AppData[key].page.ajax.url;

					} else {
						ajaxOpt.url = serverLocation
								+ AppData[key].page.ajax.url;
						PostData.uri = data.AjaxData.uri;

					}

					if (data.AjaxData.serializeType != undefined) {
						ajaxOpt.Accept = data.AjaxData.serializeType;
					}
					var ajaxprocess = new AjaxProcess(ajaxOpt, PostData);
					ajaxprocess.doAjax();

				}
			},
			"result" : {
				"type" : "div",
				"style" : "code-result",
				"content" : {

				}
			}
		}
	}
};

// main json data
var AppDataMobile = window.AppDataMobile = {
	"ov" : ov,// Observation Value
	"device" : device,// Device, Sensing Device, Sensor
	"tps" : tps,// Sensor Temporal Property
	"platform" : platform,// Platform, Testbed
	"tpp" : tpp,// Platform Temporal Property
	"meas_capab" : meas_capab,// Measurement Capability
	"meas_prop" : meas_prop, // Measurement Property
	"data_link" : data_link,//
	"link_review" : link_review,// Link Review
	"Aggregate" : {
		"metro" : {
			"title" : "Aggregate",
			"location" : "Aggregate.html",// special page so null
			"description" : "Aggregate page"
		},
		"page" : {}
	},
	"AjaxAPI" : {
		"metro" : {
			"title" : "AjaxAPI",
			"location" : "jqueryAjax.html",// special page so null
			"description" : "Ajax API for common function"
		},
		"page" : {}
	}
};

/**
 * core function use the data to create the html
 * 
 */
function createMobileHTML(view, jqueryParent) {
	$
			.each(
					view,
					function(key) {
						switch (this.type) {
						case "div":
							var _default = {
								"type" : "div",
								"style" : "",// could set default style
								"content" : undefined
							};

							var $v = $.extend(_default, this);

							var string = "<div class='" + key + "'></div>";
							jqueryParent.append(string);
							var $t = $("." + key + ":last");
							$t.addClass($v.style);
							if (this.content != undefined) {
								createMobileHTML($v.content, $t);
							}

							break;

						case "input":
							var _default = {
								"label" : "",
								"labelStyle" : "label",
								"style" : "",
								"type" : "input",
								"level" : "0",
								"defalutValue" : "",
								"isData" : "false"
							};
							var $v = $.extend(_default, this);

							var $t;

							if ($v.level == 0) {
								var string = "<div id='" + key
										+ "OutDiv' class='" + $v.style + "'>"
										+ "<span class='" + $v.labelStyle
										+ "'>" + $v.label + "</span>"
										+ "<input id='" + key
										+ "' type='text' value='"
										+ $v.defalutValue + "' ";
								if ($v.isData == "true" || $v.isData == true) {
									string += "class='AjaxData'";
								}
								string += "/>" + "</div>";

								jqueryParent.append(string);

							} else if ($v.level == 1 || $v.level == 2) {
								var string = "<div id='" + key
										+ "OutDiv' class='" + $v.style + "' ";
								if ($v.isData == "true" || $v.isData == true) {
									string += "class='AjaxData'";
								}
								string += "><span class='" + $v.labelStyle
										+ "'>" + $v.label + "</span>"
										+ "<input class='" + key
										+ "' type='text' value='"
										+ $v.defalutValue + "'  />"
										+ "<a  data-role=\"button\" id='" + key
										+ "_link'>Add value</a>" + "</div>";
								jqueryParent.append(string);

								$("a[data-role=button]:last")
										.click(
												function() {
													var html = "<div><span class='"
															+ $v.labelStyle
															+ "'>"
															+ $v.label
															+ "</span>"
															+ "<input class='"
															+ key
															+ "' type='text' value='"
															+ $v.defalutValue
															+ "'  />"
															+ "<a  data-role=\"button\" >remove</a></div>";
													$(this).parent().append(
															html);
													$(this).parent().find(
															"input")
															.textinput();

													$(this)
															.parent()
															.find("a:last")
															.buttonMarkup(
																	"refresh")
															.click(
																	function() {
																		$(this)
																				.parent()
																				.remove();
																	});
												});

							} else if ($v.level == 3) {
								var string = "<div id='" + key
										+ "OutDiv' class='" + $v.style
										+ "'><table><tr><td>" + "<span class='"
										+ $v.labelStyle + "'>" + $v.label
										+ "</span>" + "</td>" + "<td>"
										+ "<input name='" + key
										+ "' type='text' level='3' value='"
										+ $v.defalutValue + "' ";
								if ($v.isData == "true" || $v.isData == true) {
									string += "class='AjaxData'";
								}
								string += "/></td></tr>" + "</table></div>";

								jqueryParent.append(string);
							}

							break;
						case "label":
							var html = "<div class='" + this.style + "'>"
									+ this.message + "</div>";
							jqueryParent.append(html);

							break;
						case "button":
							var _default = {
								"label" : "",
								"labelStyle" : "label",
								"type" : "button",
								"value" : "",
								"labelStyle" : "",
								"style" : "",
								"isData" : "false",
								"click" : function() {
								}
							};
							var $v = $.extend(_default, this);

							var html = "<div id='" + key + "OutDiv' class='"
									+ $v.style + "'><div class='"
									+ $v.labelStyle + "'>" + $v.label
									+ "</div><input type='button' id='" + key
									+ "' value='" + $v.value
									+ "' class='ui-button-text'/></div>";
							jqueryParent.append(html);
							jqueryParent.find("input[type=button]:last").click(
									$v.click());
							break;
						case "uri":
							var _default = {
								"label" : "",
								"labelStyle" : "label",
								"style" : "",
								"type" : "uri",
								"level" : "0",
								"defalutValue" : "http://",
								"isData" : "false"
							};
							var $v = $.extend(_default, this);

							var $t;

							if ($v.level == 0) {
								var string = "<div id='" + key
										+ "OutDiv' class='" + $v.style + "'>"
										+ "<span class='" + $v.labelStyle
										+ "'>" + $v.label + "</span>"
										+ "<input id='" + key
										+ "' type='text' value='"
										+ $v.defalutValue + "' ";
								if ($v.isData == "true" || $v.isData == true) {
									string += "class='AjaxData'";
								}
								string += "/>" + "</div>";

								jqueryParent.append(string);

							} else if ($v.level == 1 || $v.level == 2) {
								var string = "<div id='" + key
										+ "OutDiv' class='" + $v.style + "' ";
								if ($v.isData == "true" || $v.isData == true) {
									string += "class='AjaxData'";
								}
								string += "><span class='" + $v.labelStyle
										+ "'>" + $v.label + "</span>"
										+ "<input class='" + key
										+ "' type='text' value='"
										+ $v.defalutValue + "'  />"
										+ "<a  data-role=\"button\" id='" + key
										+ "_link'>Add value</a>" + "</div>";
								jqueryParent.append(string);

								$("a[data-role=button]:last")
										.click(
												function() {
													var html = "<div><span class='"
															+ $v.labelStyle
															+ "'>"
															+ $v.label
															+ "</span>"
															+ "<input class='"
															+ key
															+ "' type='text' value='"
															+ $v.defalutValue
															+ "'  />"
															+ "<a  data-role=\"button\" >remove</a></div>";
													$(this).parent().append(
															html);
													$(this).parent().find(
															"input")
															.textinput();

													$(this)
															.parent()
															.find("a:last")
															.buttonMarkup(
																	"refresh")
															.click(
																	function() {
																		$(this)
																				.parent()
																				.remove();
																	});
												});

							} else if ($v.level == 3) {
								var string = "<div id='" + key
										+ "OutDiv' class='" + $v.style
										+ "'><table><tr><td>" + "<span class='"
										+ $v.labelStyle + "'>" + $v.label
										+ "</span>" + "</td>" + "<td>"
										+ "<input name='" + key
										+ "' type='text' level='3' value='"
										+ $v.defalutValue + "' ";
								if ($v.isData == "true" || $v.isData == true) {
									string += "class='AjaxData'";
								}
								string += "/></td></tr>" + "</table></div>";

								jqueryParent.append(string);
							}

							break;
						case "accordions":
							var _default = {
								"type" : "accordions",
								"title" : "",
								"open" : "false",
								"content" : undefined
							};

							var $v = $.extend(_default, this);

							var html = "  <div  class='" + key
									+ "'  data-role=\"collapsible\" ";
							if ($v.open == "true") {
								html += "data-collapsed=\"false\"";
							}
							html += " >" + "<h3>" + $v.title + "</h3>";
							html += "</div>";
							jqueryParent.append(html);
							var $t = $("." + key + ":last");
							$t.addClass($v.style);
							if (this.content != undefined) {
								createMobileHTML($v.content, $t);
							}
							break;
						case "datetime":// can be change to another plugin
							var _default = {
								"label" : "",
								"labelStyle" : "label",
								"type" : "datetime",
								"style" : "",
								"defalutValue" : "",
								"isData" : "false"
							};
							var $v = $.extend(_default, this);

							var string = "<div id='"
									+ key
									+ "OutDiv' class='"
									+ $v.style
									+ "'>"
									+ "<span class='"
									+ $v.labelStyle
									+ "'>"
									+ $v.label
									+ "</span>"
									+ "<input id='"
									+ key
									+ "' type=\"datetime-local\" data-clear-btn=\"true\"";
							if ($v.isData == "true" || $v.isData == true) {
								string += "class='AjaxData'";
							}
							string += "/>" + "</div>";

							jqueryParent.append(string);

							break;
						case "date":
							var _default = {
								"label" : "",
								"labelStyle" : "label",
								"type" : "date",
								"style" : "",
								"defalutValue" : "",
								"isData" : "false"
							};
							var $v = $.extend(_default, this);

							var string = "<div id='" + key + "OutDiv' class='"
									+ $v.style + "'>" + "<span class='"
									+ $v.labelStyle + "'>" + $v.label
									+ "</span>" + "<input id='" + key
									+ "' type=\"date\" data-clear-btn=\"true\"";
							if ($v.isData == "true" || $v.isData == true) {
								string += "class='AjaxData'";
							}
							string += "/>" + "</div>";

							jqueryParent.append(string);
							break;
						case "checkbox":
							var _default = {
								"label" : "",
								"type" : "checkbox",
								"style" : "",
								"isData" : "true",
								"content" : {

								}
							};
							var $v = $.extend(_default, this);

							var html = " <fieldset data-role=\"controlgroup\" class='"
									+ key
									+ "'><legend>"
									+ $v.label
									+ "</legend></fieldset>";

							jqueryParent.append(html);

							$.each($v.content, function(k) {
								$("fieldset[class=" + key + "]:last").append(
										" <input type=\"checkbox\" name=\"" + k
												+ "\" id=\"" + k + "\">"
												+ "<label for=\"" + k + "\">"
												+ this.label + "</label>");
							});

							break;
						case "radio":
							var _default = {
								"type" : "radio",
								"label" : "",
								"style" : "",
								"content" : {}
							};
							var $v = $.extend(_default, this);

							var html = " <fieldset data-role=\"controlgroup\" class='"
									+ key
									+ "' ><legend>"
									+ $v.label
									+ "</legend></fieldset>";

							jqueryParent.append(html);

							$.each($v.content, function(k) {
								$("fieldset[class=" + key + "]:last").append(
										" <input type=\"radio\" name=\"" + key
												+ "\" id=\"" + k
												+ "\"  value=\"" + this.value
												+ "\" >" + "<label for=\"" + k
												+ "\">" + this.label
												+ "</label>");
							});

							break;
						case "switch":
							var _default = {
								"type" : "switch",
								"label" : "",
								"style" : "",
								"content" : []
							};
							var $v = $.extend(_default, this);
							var html = "<div id='" + key + "OutDiv' class='"
									+ $v.style + "'>" + " <label for=\"" + key
									+ "\">" + $v.label + "</label>"
									+ " <select name=\"" + key + "\" id=\""
									+ key + "\" data-role=\"slider\">"
									+ " <option value=\"false\">"
									+ $v.content[0] + "</option>"
									+ " <option value=\"true\">"
									+ $v.content[1] + "</option>"
									+ " </select>" + "</div>";

							jqueryParent.append(html);

							break;
						case "map":
							
							var _default = {
								"type" : "map",
								"style" : "",
								"click" : null

							};
							var $v = $.extend(_default, this);
							var html = "<div id='" + key + "OutDiv' class='"
									+ $v.style + "'><div id='" + key
									+ "_map' class='map-div'></div></div>";
							jqueryParent.append(html);
							var latlng = new google.maps.LatLng(
									31.311160897431638, 121.53830409049988);// initial
							// location
							var myOptions = {
								zoom : 1,// level of map,how big it is
								center : latlng,// location
								mapTypeId : google.maps.MapTypeId.ROADMAP
							// mode of map
							};

							var thisMap = new google.maps.Map($("#" + key
									+ "_map")[0], myOptions);
							window.marker = null;
							var geocoder = new google.maps.Geocoder();
							var infowindow = new google.maps.InfoWindow();

														
							google.maps.event
									.addListener(
											thisMap,
											'click',
											function(event) {
												var text = event.latLng.lat()
														+ "_"
														+ event.latLng.lng();
												// $("#" + key).val(text);
												geocoder
														.geocode(
																{
																	'latLng' : event.latLng
																},
																function(
																		results,
																		status) {
																	if (status == google.maps.GeocoderStatus.OK) {
																		if (results[1]) {
																			if (window.marker == null) {
																				marker = new google.maps.Marker(
																						{
																							position : event.latLng,
																							map : thisMap
																						});
																			} else {
																				marker
																						.setPosition(event.latLng);
																			}
																			Address = results[1].formatted_address;
																			$v
																					.click(results);

																			infowindow
																					.setContent(results[1].formatted_address);
																			infowindow
																					.open(
																							thisMap,
																							marker);

																		}
																	}
																});

											});
							google.maps.event.trigger(thisMap, 'resize');
							
							break;
						}

					});

}

// main in

$(function() {

	var view = AppDataMobile[key].page.view;
	var ajaxOpt = AppDataMobile[key].page.ajax;
	createHead(key, AppDataMobile[key]);
	addContent(key);
	AddMenu(key);
	createMobileHTML(view, $(".content:last").find(
			"div[data-role=collapsible-set]"));// depend on appdata
	// AddMenu();
});
